<template>
	<view class="list-container">
		<view class="title" v-if="title && !hideTitle">
			{{title}}
		</view>
		<view class="list" v-if="true">
			<view class="cell" v-for="(item,index) in productList" :key="index">
				<view class="image">
					<img :preview="false" :src="item.image" mode="aspectFill" width="112" height="112"
						radius="10"></img>
				</view>
				<view class="content">
					<view class="title">
						{{item.title}}
					</view>
					<view class="process" v-if="false">
						<fui-progress :percent="60" background="#ddd" activeColor="#FFB703"></fui-progress>
					</view>
					<view class="count" v-if="false">
						已抢60件
					</view>
					<view style="flex: 1;font-size: 1rpx;">
						&nbsp;
					</view>
					<view class="yongjin">
						<template v-if="item.commission_type == 'fixed'">
							佣金: ¥ {{item.commission_value}}
						</template>
						<template v-else>
							佣金: {{item.commission_value}} %
						</template>
					</view>
					<view class="bottom">
						<view class="price">
							¥<text style="font-size: 36rpx;">{{item.price}}</text>
						</view>
						<view class="action">
							<button style="width: 60px; color:#fff; background-color: #E0690D;" class="ta-button">
								去抢购
							</button>
							<button style="width: 60px; color:#fff; background-color:#F9150A;" class="ta-button">
								分享赚
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ActShareEarn',
		props: {
			title: {
				type: String,
				default: ''
			},
			hideTitle: {
				type: Boolean,
				default: false
			},
			productList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	.list-container {
		width: 360px;
		margin: 0 7.5px 7.5px;
		background-color: #FFF;
		border-radius: 7px;
		display: flex;
		flex-direction: column;
		border: 1px solid #eee;
	}

	.list {
		padding: 7.5px;
		display: flex;
		flex-direction: column;
		gap: 17.5px;
	}

	.action {
		display: flex;
		gap: 5px;
	}

	.cell {
		display: flex;
		position: relative;
	}

	.image {
		border: 1px solid #eee;
		border-radius: 8px;
	}

	.image img {
		border-radius: 8px;
	}

	.yongjin {
		border: 1px solid #C21F1C;
		border-radius: 5px;
		color: #C21F1C;
		padding: 2px 5px;
		align-self: self-start;
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding-left: 11px;
	}

	.title {
		font-size: 13px;
		font-weight: 900;
	}

	.count {
		color: #666;
		font-size: 11px;
		font-weight: 900;
	}

	.process {
		padding: 7.5px 75px 7.5px 0;
	}

	.bottom {
		display: flex;
		align-items: flex-end;
	}

	.price {
		color: #ff0033;
		flex: 1;
		align-items: baseline;
		font-size: 11px;
	}

	.share {
		justify-content: center;
		align-items: center;
		display: flex;
		position: absolute;
		right: 0px;
		top: 40px;
		font-size: 11px;
		color: #fff;
		background-color: #FF2B2B;
		border-bottom-left-radius: 7.5px;
		border-top-left-radius: 7.5px;
		padding: 2px 4px;
	}

	.list-container>.title {
		font-size: 18px;
		font-weight: 900;
		padding-left: 10px;
		line-height: 40px;
		height: 40px;
		border-bottom: 1px solid #eee;
	}

	/* 特殊字号需添加注释说明 */
	/* 原36rpx对应18px, 26rpx对应13px */
	.ta-button {
		height: 28.5px;
		width: 80px;
		border-radius: 20px;
		font-size: 13px;
		color: #e60000;
		background-color: #FFF;
		border: 1px solid #e60000;
	}

	.price text {
		font-size: 18px !important;
	}
</style>
